<template>
  <div class="login-phone">
    <div class="pic">
      <img src="https://media.wxcwy.com/mini/images/logo@2x.png" class="img-size-100" />
    </div>
    <div class="input-box">
      <text class="tel-tips">+86</text>
      <input
        type="number"
        maxlength="11"
        :value="mobileVal"
        focus
        @input="onInputTel"
        class="input"
        placeholder="请输入您的手机号"
      />
      <text class="delete-btn" @click="mobileVal = ''" v-if="mobileVal"></text>
    </div>
    <div class="input-box">
      <input
        type="number"
        class="input"
        maxlength="6"
        :value="vCodeVal"
        @input="onInputVcode"
        placeholder="输入验证码"
      />
      <div class="code-btn" v-if="countTime <= 0" @click="onSendSms">
        发送验证码
      </div>
      <div class="code-btn" v-else>重新获取({{ countTime }}s)</div>
    </div>
    <button class="btn" @click="onWxLoginVcode">登录</button>
    <!-- <button
      open-type="getPhoneNumber"
      hover-class="none"
      @getphonenumber="getPhoneNumber"
      class="nav-btn"
    >
      <text class="icon"></text>
      <text>微信验证登录</text>
    </button> -->
  </div>
</template>

<script>
var intervarID,
  cbUrl = "";
import { mapState, mapMutations } from "vuex";
import sendSms from "@/mixin/send-sms.js";
export default {
  mixins: [sendSms],
  components: {},
  data() {
    return {};
  },
  computed: {
    ...mapState(["loginInfo", "shareId"]),
  },
  onLoad(options) {
    cbUrl = options.cbUrl;
  },
  methods: {
    ...mapMutations(["changUserInfo", "changToken"]),
    onWxLoginVcode() {
      this.$api
        .onWxLoginVcode({
          mobile: this.mobile,
          vcode: this.vcode,
          union_id: this.loginInfo.union_id,
          share_code: this.shareId,
        })
        .then((res) => {
          if (res.code == 200) {
            this.changUserInfo(res.data.user_info);
            this.loginSuccess(res.data);
          }
        });
    },
    loginSuccess() {
      let url = decodeURIComponent(cbUrl);
      if (url.indexOf("backDelta=1") > 0) {
        uni.navigateBack({
          delta: 1,
        });
      } else {
        uni.redirectTo({
          url,
          fail() {
            uni.reLaunch({
              url,
            });
          },
        });
      }
    },
  },
};
</script>

<style lang="scss">
.login-phone {
  color: #666666;
  font-size: 32rpx;
  line-height: 45rpx;
  padding: 0 30rpx;
  overflow: hidden;
  .img-size-100 {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .pic {
    width: 260rpx;
    height: 260rpx;
    margin: 120rpx auto;
    border-radius: 50%;
    overflow: hidden;
  }
  .input-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e7e7e7;
    .input {
      flex: 1;
      height: 90rpx;
      padding-left: 20rpx;
    }
    .delete-btn {
      flex: 0 0 80rpx;
      height: 80rpx;
      background: url(https://media.wxcwy.com/mini/images/srqc_icon@2x.png) no-repeat center right;
      background-size: 40% 40%;
    }
    .code-btn {
      height: 60rpx;
      line-height: 60rpx;
      flex: 0 0 285rpx;
      text-align: center;
      border-left: 1px solid #e7e7e7;
      color: #1772ff;
      font-size: 28rpx;
    }
    .tel-tips {
      height: 40rpx;
      flex: 0 0 140rpx;
      text-align: center;
      border-right: 1px solid #e7e7e7;
      color: #999999;
      font-size: 30rpx;
    }
  }
  .btn {
    display: block;
    width: 100%;
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    margin: 80rpx auto 0;
    background: linear-gradient(
      270deg,
      rgba(44, 172, 255, 1) 0%,
      rgba(40, 123, 252, 1) 100%
    );
    border-radius: 8rpx;
    color: #fff;
  }
  .nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30rpx;
    text-align: center;
    .icon {
      flex: 0 0 56rpx;
      height: 46rpx;
      margin-right: 10rpx;
      background: url(https://media.wxcwy.com/mini/images/vx_icon2@2x.png) no-repeat center center;
      background-size: 100% 100%;
    }
  }
}
</style>
